<template>
  <div style="padding: 50px 20px 40px 10px">
    <el-row>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>试题录入</span>
        </div>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="学科" prop="subjectID">
            <el-select
              v-model="ruleForm.subjectID"
              placeholder="请选择"
              class="inputEle"
            >
              <el-option label="ces" value="1" />
              <el-option
                v-for="(item, idx) in subjectArr"
                :key="idx"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="目录" prop="catalogID">
            <el-select
              v-model="ruleForm.catalogID"
              placeholder="请选择"
              class="inputEle"
            >
              <el-option label="ces" value="1" />
              <el-option
                v-for="(item, idx) in catalogArr"
                :key="idx"
                :label="item"
                :value="idx"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="企业" prop="enterpriseID">
            <el-select
              v-model="ruleForm.enterpriseID"
              placeholder="请选择"
              class="inputEle"
            >
              <el-option label="ces" value="1" />
              <el-option
                v-for="(item, idx) in enterpriseIDArr"
                :key="idx"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="城市" prop="province">
            <el-select
              v-model="ruleForm.province"
              placeholder="请选择"
              class="inputEleAlr"
            >
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
            <el-select
              v-model="ruleForm.city"
              placeholder="请选择"
              class="inputEleAlr"
            >
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="方向" prop="direction">
            <el-select
              v-model="ruleForm.direction"
              placeholder="请选择"
              class="inputEle"
            >
              <el-option
                v-for="(item, idx) in directionArr"
                :key="idx"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="题型" prop="questionType">
            <el-radio v-model="ruleForm.questionType" label="1">单选</el-radio>
            <el-radio v-model="ruleForm.questionType" label="2">多选</el-radio>
            <el-radio v-model="ruleForm.questionType" label="3">简答</el-radio>
          </el-form-item>
          <el-form-item label="难度" prop="difficulty">
            <el-radio-group v-model="ruleForm.difficulty">
              <el-radio label="1">简单</el-radio>
              <el-radio label="2">一般</el-radio>
              <el-radio label="3">困难</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="题干" prop="question">
            <el-input type="textarea" :rows="2" v-model="ruleForm.question" />
          </el-form-item>
          <el-form-item label="选项">
            <el-radio v-model="radio" label="1" class="radio">
              A:<el-input
                v-model="input"
                class="inputAlr"
                placeholder="请输入内容"
              />
              <div class="radioItem">
                <el-upload
                  action="https://jsonplaceholder.typicode.com/posts/"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                  class="imgAll"
                >
                  <div class="imgEle">上传图片</div>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="" />
                </el-dialog>
              </div>
            </el-radio>
            <br />
            <br />
            <el-radio v-model="radio" label="2">
              B:<el-input
                v-model="input"
                class="inputAlr"
                placeholder="请输入内容"
              />
              <div class="radioItem">
                <el-upload
                  action="https://jsonplaceholder.typicode.com/posts/"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                  class="imgAll"
                >
                  <div class="imgEle">上传图片</div>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="" />
                </el-dialog>
              </div>
            </el-radio>
            <br />
            <br />
            <el-radio v-model="radio" label="3">
              C:<el-input
                v-model="input"
                class="inputAlr"
                placeholder="请输入内容"
              />
              <div class="radioItem">
                <el-upload
                  action="https://jsonplaceholder.typicode.com/posts/"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                  class="imgAll"
                >
                  <div class="imgEle">上传图片</div>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="" />
                </el-dialog>
              </div>
            </el-radio>
          </el-form-item>
          <el-button type="danger" class="addBtn" disabled>
            +增加选项与答案
          </el-button>
          <br />
          <br />
          <el-form-item label="解析视频">
            <el-input v-model="textarea" style="width: 450px"></el-input>
          </el-form-item>
          <el-form-item label="答案解析" prop="answer">
            <el-input type="textarea" :rows="2" v-model="ruleForm.answer" />
          </el-form-item>
          <el-form-item label="题目备注">
            <el-input
              class="elInput"
              type="textarea"
              style="width: 450px"
              :rows="2"
              v-model="textarea"
            />
          </el-form-item>
          <el-form-item label="试题标签">
            <el-select
              v-model="radio"
              placeholder="请选择试题标签"
              style="width: 450px"
            >
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-button class="reviseBtn" type="primary" @click="submitEle">
            确认提交
          </el-button>
        </el-form>
      </el-card>
    </el-row>
  </div>
</template>
<script>
import { getQuestionsApi, postQuestionsApi, putQuestionsApi } from '@/api/menu'
export default {
  data() {
    return {
      subjectArr: [], // 存储学科数组
      catalogArr: [], // 存储目录数组
      enterpriseIDArr: [], // 存储企业数组
      directionArr: [], // 存储方向数组
      dialogImageUrl: '',
      dialogVisible: false,
      textarea: '',
      radio: '1',
      ruleForm: {
        answer: '', // 答案解析
        question: '', // 题干
        difficulty: '', // 难度
        questionType: '', // 题型
        direction: '', // 方向
        // province: '', // 城市
        subjectID: '', // 学科
        catalogID: '', // 目录
        city: '新荣区',
        enterpriseID: '', // 企业,
        province: '大同市'
      },
      input: '',
      rules: {
        name: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        region: [{ required: true, message: '请输入内容', trigger: 'change' }],
        answer: [{ required: true, message: '请输入内容', trigger: 'change' }],
        question: [
          { required: true, message: '请输入内容', trigger: 'change' }
        ],
        difficulty: [
          { required: true, message: '请输入内容', trigger: 'change' }
        ],
        questionType: [
          { required: true, message: '请输入内容', trigger: 'change' }
        ],
        direction: [
          { required: true, message: '请输入内容', trigger: 'change' }
        ],
        province: [
          { required: true, message: '请输入内容', trigger: 'change' }
        ],
        subjectID: [
          { required: true, message: '请输入内容', trigger: 'change' }
        ],
        catalogID: [
          { required: true, message: '请输入内容', trigger: 'change' }
        ],
        enterpriseID: [
          { required: true, message: '请输入内容', trigger: 'change' }
        ]
      }
    }
  },
  async created() {
    if (this.$route.query.tb) {
      const obj = JSON.parse(this.$route.query.tb)
      obj.city = '新荣区'
      obj.province = '大同市'
      this.ruleForm = obj
      // this.ruleForm = JSON.parse(this.$route.query.tb)
    }
    const { data: res } = await getQuestionsApi()
    res.items.forEach((item, idx) => {
      this.subjectArr.push(item.subject)
      this.catalogArr.push(item.catalog)
      this.enterpriseIDArr.push(item.enterpriseID)
      this.directionArr.push(item.direction)
    })
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    submitEle() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          const obj = {
            answer: this.ruleForm.answer,
            catalogID: this.ruleForm.catalogID,
            chkRemarks: '儿童',
            chkState: 1,
            chkUserID: 2,
            city: '新荣区',
            creatorID: 2,
            difficulty: this.ruleForm.difficulty,
            direction: this.ruleForm.direction,
            directoryName: 'vue基础',
            enterpriseID: this.ruleForm.enterpriseID,
            id: 59,
            isChoice: 1,
            number: 'clgeqfkxf016qyi1fgp3hd2yl',
            options: [
              {
                id: 268,
                questionsID: 59,
                code: 'A',
                title: '',
                img: '',
                isRight: false
              },
              {
                id: 269,
                questionsID: 59,
                code: 'B',
                title: '',
                img: '',
                isRight: false
              },
              {
                id: 270,
                questionsID: 59,
                code: 'C',
                title: '',
                img: '',
                isRight: false
              },
              {
                id: 271,
                questionsID: 59,
                code: 'D',
                title: '',
                img: '',
                isRight: false
              }
            ],
            province: '大同市',
            publishDate: '2023-04-13T06:22:52.000Z',
            publishState: 0,
            question: '<p>呃呃呃</p>',
            questionType: '1',
            remarks: '11',
            subjectID: 4,
            subjectName: '前端',
            tags: '语言2',
            videoURL: '1'
          }
          if (this.$route.query.tb) {
            await putQuestionsApi(obj)
          } else {
            await postQuestionsApi(obj)
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
.inputEle {
  width: 35%;
}
.inputEleAlr {
  width: 17.5%;
}
.inputAlr {
  width: 120%;
}
.radio {
  position: relative;
}
.radioItem {
  ::v-deep {
    .el-upload--picture-card {
      width: 100px;
      height: 50px;
      color: rgb(12, 13, 13);
      height: auto;
    }
  }
}
.imgEle {
  width: 100px;
  height: 50px;
  line-height: 50px;
}
.imgAll {
  position: absolute;
  left: 320px;
  top: -5px;
}
.addBtn {
  margin-left: 100px;
  width: 120px;
  height: 31px;
  padding: 9px;
  font-size: 12px;
}
.reviseBtn {
  margin-left: 100px;
}
</style>
